<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>项目管理</title>
	<meta name="decorator" content="ani"/>
	<script type="text/javascript">
		var validateForm;
		var $table; // 父页面table表格id
		var $topIndex;//弹出窗口的 index
		function doSubmit(table, index){//回调函数，在编辑和保存动作时，供openDialog调用提交表单。
		  if(validateForm.form()){
			  $table = table;
			  $topIndex = index;
			  jp.loading();
			  $("#inputForm").submit();
			  return true;
		  }

		  return false;
		}

		$(document).ready(function() {
		    var bx=$("#bx").val();
            $.ajax({
                url : "${ctx}/ap/policy/li",
                success : function(data) {
                    $("#bd").empty();
                    $("#bd").append("<option value=''>请选择</option>");
                    $.each(JSON.parse(data), function (idx, item) {
                        if(item.name==bx){
                            $("#bd").append("<option selected='selected' value='"+item.name+"'>"+item.name+"</option>");

                        }else{
                            $("#bd").append("<option value='"+item.name+"'>"+item.name+"</option>");

                        }
                    })
                },
                error : function(data){
                    alert("操作失败!");
                }
            });
			validateForm = $("#inputForm").validate({
				submitHandler: function(form){
					jp.post("${ctx}/infor/project/save",$('#inputForm').serialize(),function(data){
						if(data.success){
	                    	$table.bootstrapTable('refresh');
	                    	jp.success(data.msg);
	                    	jp.close($topIndex);//关闭dialog

	                    }else{
            	  			jp.error(data.msg);
	                    }
					})
				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			
	        $('#effectiveDate').datetimepicker({
				 format: "YYYY-MM-DD HH:mm:ss"
		    });
	        $('#expirationDate').datetimepicker({
				 format: "YYYY-MM-DD HH:mm:ss"
		    });
		});
		
		function addRow(list, idx, tpl, row){
			$(list).append(Mustache.render(tpl, {
				idx: idx, delBtn: true, row: row
			}));
			$(list+idx).find("select").each(function(){
				$(this).val($(this).attr("data-value"));
			});
			$(list+idx).find("input[type='checkbox'], input[type='radio']").each(function(){
				var ss = $(this).attr("data-value").split(',');
				for (var i=0; i<ss.length; i++){
					if($(this).val() == ss[i]){
						$(this).attr("checked","checked");
					}
				}
			});
			$(list+idx).find(".form_datetime").each(function(){
				 $(this).datetimepicker({
					 format: "YYYY-MM-DD HH:mm:ss"
			    });
			});
		}
		function delRow(obj, prefix){
			var id = $(prefix+"_id");
			var delFlag = $(prefix+"_delFlag");
			if (id.val() == ""){
				$(obj).parent().parent().remove();
			}else if(delFlag.val() == "0"){
				delFlag.val("1");
				$(obj).html("&divide;").attr("title", "撤销删除");
				$(obj).parent().parent().addClass("error");
			}else if(delFlag.val() == "1"){
				delFlag.val("0");
				$(obj).html("&times;").attr("title", "删除");
				$(obj).parent().parent().removeClass("error");
			}
		}
	</script>
</head>
<body class="bg-white">
<div class="tabs-container">
	<ul class="nav nav-tabs">
		<li class="active"><a data-toggle="tab" href="#tab-01" aria-expanded="true">基础信息</a>
		</li>
		<li class=""><a data-toggle="tab" href="#tab-02" aria-expanded="false">上游客户</a>
		</li>
		<li class=""><a data-toggle="tab" href="#tab-03" aria-expanded="false">下游客户</a>
		</li>
		<li class=""><a data-toggle="tab" href="#tab-04" aria-expanded="false">物流组织</a>
		</li>
	</ul>
	<div class="tab-content">
		<div id="tab-01" class="tab-pane fade in  active">


		<form:form id="inputForm" modelAttribute="project" action="${ctx}/infor/project/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
		<sys:message content="${message}"/>
		<table class="table table-bordered">
		   <tbody>
				<tr>
					<input type="hidden" id="bx" value="${project.remarks}"/>
					<td class="width-15 active"><label class="pull-right">项目名称：</label></td>
					<td class="width-35">
						<input name="name"<c:if test="${project.id!=null and project.id!=''}">readonly="readonly"</c:if> value="${project.name}" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-15 active"><label class="pull-right">合同编号：</label></td>
					<td class="width-35">
						<form:input path="contractCode" htmlEscape="false"    class="form-control "/>
					</td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">合同名称：</label></td>
					<td class="width-35">
						<form:input path="contractName" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-15 active"><label class="pull-right">结算周期：</label></td>
					<td class="width-35">
						<form:input path="cycle" htmlEscape="false"    class="form-control "/>
					</td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">失效日期：</label></td>
					<td class="width-35">
						<p class="input-group">
							<div class='input-group form_datetime' id='effectiveDate'>
			                    <input type='text'  name="effectiveDate" class="form-control "  value="<fmt:formatDate value="${project.effectiveDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
			                    <span class="input-group-addon">
			                        <span class="glyphicon glyphicon-calendar"></span>
			                    </span>
			                </div>						            
			            </p>
					</td>
					<td class="width-15 active"><label class="pull-right">生效日期：</label></td>
					<td class="width-35">
						<p class="input-group">
							<div class='input-group form_datetime' id='expirationDate'>
			                    <input type='text'  name="expirationDate" class="form-control "  value="<fmt:formatDate value="${project.expirationDate}" pattern="yyyy-MM-dd HH:mm:ss"/>"/>
			                    <span class="input-group-addon">
			                        <span class="glyphicon glyphicon-calendar"></span>
			                    </span>
			                </div>						            
			            </p>
					</td>
				</tr>
				<tr>
					<td class="width-15 active"><label class="pull-right">合同主要约定：</label></td>
					<td class="width-35">
						<form:input path="appointment" htmlEscape="false"    class="form-control "/>
					</td>
					<td class="width-15 active"><label class="pull-right">保单：</label></td>
					<td class="width-35">
						<select id="bd" name="remarks" class=" form-control">
						</select>
					</td>
				</tr>
		 	</tbody>
		</table>
		<div class="tabs-container">
            <ul class="nav nav-tabs">
				<li class="active"><a data-toggle="tab" href="#tab-1" aria-expanded="true">里程坎级：</a>
                </li>
				<li class=""><a data-toggle="tab" href="#tab-2" aria-expanded="false">结算方式：</a>
                </li>
				<li class=""><a data-toggle="tab" href="#tab-3" aria-expanded="false">结算类型：</a>
                </li>
				<li class=""><a data-toggle="tab" href="#tab-4" aria-expanded="false">报表模版：</a>
                </li>
				<li class=""><a data-toggle="tab" href="#tab-5" aria-expanded="false">运量坎级：</a>
                </li>
            </ul>
            <div class="tab-content">
				<div id="tab-1" class="tab-pane fade in  active">
			<a class="btn btn-white btn-sm" onclick="addRow('#mileageScaleList', mileageScaleRowIdx, mileageScaleTpl);mileageScaleRowIdx = mileageScaleRowIdx + 1;" title="新增"><i class="fa fa-plus"></i> 新增</a>
			<table class="table table-striped table-bordered table-condensed">
				<thead>
					<tr>
						<th class="hide"></th>
						<th>分级区间</th>
						<th>区域</th>
						<th>最小值</th>
						<th>最大值</th>
						<th>备注信息</th>
						<th width="10">&nbsp;</th>
					</tr>
				</thead>
				<tbody id="mileageScaleList">
				</tbody>
			</table>
			<script type="text/template" id="mileageScaleTpl">//<!--
				<tr id="mileageScaleList{{idx}}">
					<td class="hide">
						<input id="mileageScaleList{{idx}}_id" name="mileageScaleList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
						<input id="mileageScaleList{{idx}}_delFlag" name="mileageScaleList[{{idx}}].delFlag" type="hidden" value="0"/>
					</td>
					
					<td>
						<input id="mileageScaleList{{idx}}_name" name="mileageScaleList[{{idx}}].name" type="text" value="{{row.name}}"    class="form-control "/>
					</td>
					
					
					<td>
						<input id="mileageScaleList{{idx}}_region" name="mileageScaleList[{{idx}}].region" type="text" value="{{row.region}}"    class="form-control "/>
					</td>
					
					
					<td>
						<input id="mileageScaleList{{idx}}_min" name="mileageScaleList[{{idx}}].min" type="text" value="{{row.min}}"    class="form-control "/>
					</td>
					
					
					<td>
						<input id="mileageScaleList{{idx}}_max" name="mileageScaleList[{{idx}}].max" type="text" value="{{row.max}}"    class="form-control "/>
					</td>
					
					
					<td>
						<input id="mileageScaleList{{idx}}_remarks" name="mileageScaleList[{{idx}}].remarks"  value="{{row.remarks}}"   class="form-control "/>
					</td>
					
					<td class="text-center" width="10">
						{{#delBtn}}<span class="close" onclick="delRow(this, '#mileageScaleList{{idx}}')" title="删除">&times;</span>{{/delBtn}}
					</td>
				</tr>//-->
			</script>
			<script type="text/javascript">
				var mileageScaleRowIdx = 0, mileageScaleTpl = $("#mileageScaleTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
				$(document).ready(function() {
					var data = ${fns:toJson(project.mileageScaleList)};
					for (var i=0; i<data.length; i++){
						addRow('#mileageScaleList', mileageScaleRowIdx, mileageScaleTpl, data[i]);
						mileageScaleRowIdx = mileageScaleRowIdx + 1;
					}
				});
			</script>
			</div>
				<div id="tab-2" class="tab-pane fade">
			<a class="btn btn-white btn-sm" onclick="addRow('#settlementModeList', settlementModeRowIdx, settlementModeTpl);settlementModeRowIdx = settlementModeRowIdx + 1;" title="新增"><i class="fa fa-plus"></i> 新增</a>
			<table class="table table-striped table-bordered table-condensed">
				<thead>
					<tr>
						<th class="hide"></th>
						<th>结算方式</th>
						<th>备注信息</th>
						<th width="10">&nbsp;</th>
					</tr>
				</thead>
				<tbody id="settlementModeList">
				</tbody>
			</table>
			<script type="text/template" id="settlementModeTpl">//<!--
				<tr id="settlementModeList{{idx}}">
					<td class="hide">
						<input id="settlementModeList{{idx}}_id" name="settlementModeList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
						<input id="settlementModeList{{idx}}_delFlag" name="settlementModeList[{{idx}}].delFlag" type="hidden" value="0"/>
					</td>
					
					<td>
						<input id="settlementModeList{{idx}}_mode" name="settlementModeList[{{idx}}].mode" type="text" value="{{row.mode}}"    class="form-control "/>
					</td>
					
					
					<td>
						<input id="settlementModeList{{idx}}_remarks" name="settlementModeList[{{idx}}].remarks"  value="{{row.remarks}}"   class="form-control "/>
					</td>
					
					<td class="text-center" width="10">
						{{#delBtn}}<span class="close" onclick="delRow(this, '#settlementModeList{{idx}}')" title="删除">&times;</span>{{/delBtn}}
					</td>
				</tr>//-->
			</script>
			<script type="text/javascript">
				var settlementModeRowIdx = 0, settlementModeTpl = $("#settlementModeTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
				$(document).ready(function() {
					var data = ${fns:toJson(project.settlementModeList)};
					for (var i=0; i<data.length; i++){
						addRow('#settlementModeList', settlementModeRowIdx, settlementModeTpl, data[i]);
						settlementModeRowIdx = settlementModeRowIdx + 1;
					}
				});
			</script>
			</div>
				<div id="tab-3" class="tab-pane fade">
			<a class="btn btn-white btn-sm" onclick="addRow('#settlementTypeList', settlementTypeRowIdx, settlementTypeTpl);settlementTypeRowIdx = settlementTypeRowIdx + 1;" title="新增"><i class="fa fa-plus"></i> 新增</a>
			<table class="table table-striped table-bordered table-condensed">
				<thead>
					<tr>
						<th class="hide"></th>
						<th>结算类型</th>
						<th>备注信息</th>
						<th width="10">&nbsp;</th>
					</tr>
				</thead>
				<tbody id="settlementTypeList">
				</tbody>
			</table>
			<script type="text/template" id="settlementTypeTpl">//<!--
				<tr id="settlementTypeList{{idx}}">
					<td class="hide">
						<input id="settlementTypeList{{idx}}_id" name="settlementTypeList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
						<input id="settlementTypeList{{idx}}_delFlag" name="settlementTypeList[{{idx}}].delFlag" type="hidden" value="0"/>
					</td>
					
					<td>
						<input id="settlementTypeList{{idx}}_type" name="settlementTypeList[{{idx}}].type" type="text" value="{{row.type}}"    class="form-control "/>
					</td>
					
					
					<td>
						<input id="settlementTypeList{{idx}}_remarks" name="settlementTypeList[{{idx}}].remarks" value="{{row.remarks}}"    class="form-control "/>
					</td>
					
					<td class="text-center" width="10">
						{{#delBtn}}<span class="close" onclick="delRow(this, '#settlementTypeList{{idx}}')" title="删除">&times;</span>{{/delBtn}}
					</td>
				</tr>//-->
			</script>
			<script type="text/javascript">
				var settlementTypeRowIdx = 0, settlementTypeTpl = $("#settlementTypeTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
				$(document).ready(function() {
					var data = ${fns:toJson(project.settlementTypeList)};
					for (var i=0; i<data.length; i++){
						addRow('#settlementTypeList', settlementTypeRowIdx, settlementTypeTpl, data[i]);
						settlementTypeRowIdx = settlementTypeRowIdx + 1;
					}
				});
			</script>
			</div>
				<div id="tab-4" class="tab-pane fade">
			<a class="btn btn-white btn-sm" onclick="addRow('#templateList', templateRowIdx, templateTpl);templateRowIdx = templateRowIdx + 1;" title="新增"><i class="fa fa-plus"></i> 新增</a>
			<table class="table table-striped table-bordered table-condensed">
				<thead>
					<tr>
						<th class="hide"></th>
						<th>模板名称</th>
						<th>模板类型</th>
						<th>模版地址</th>
						<th>备注信息</th>
						<th width="10">&nbsp;</th>
					</tr>
				</thead>
				<tbody id="templateList">
				</tbody>
			</table>
			<script type="text/template" id="templateTpl">//<!--
				<tr id="templateList{{idx}}">
					<td class="hide">
						<input id="templateList{{idx}}_id" name="templateList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
						<input id="templateList{{idx}}_delFlag" name="templateList[{{idx}}].delFlag" type="hidden" value="0"/>
					</td>
					
					<td>
						<input id="templateList{{idx}}_name" name="templateList[{{idx}}].name" type="text" value="{{row.name}}"    class="form-control "/>
					</td>
					
					
					<td>
						<input id="templateList{{idx}}_type" name="templateList[{{idx}}].type" type="text" value="{{row.type}}"    class="form-control "/>
					</td>
					
					
					<td>
						<input id="templateList{{idx}}_location" name="templateList[{{idx}}].location" type="text" value="{{row.location}}"    class="form-control "/>
					</td>
					
					
					<td>
						<input id="templateList{{idx}}_remarks" name="templateList[{{idx}}].remarks" rows="4" value="{{row.remarks}}"   class="form-control "/>
					</td>
					
					<td class="text-center" width="10">
						{{#delBtn}}<span class="close" onclick="delRow(this, '#templateList{{idx}}')" title="删除">&times;</span>{{/delBtn}}
					</td>
				</tr>//-->
			</script>
			<script type="text/javascript">
				var templateRowIdx = 0, templateTpl = $("#templateTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
				$(document).ready(function() {
					var data = ${fns:toJson(project.templateList)};
					for (var i=0; i<data.length; i++){
						addRow('#templateList', templateRowIdx, templateTpl, data[i]);
						templateRowIdx = templateRowIdx + 1;
					}
				});
			</script>
			</div>
				<div id="tab-5" class="tab-pane fade">
			<a class="btn btn-white btn-sm" onclick="addRow('#trafficScaleList', trafficScaleRowIdx, trafficScaleTpl);trafficScaleRowIdx = trafficScaleRowIdx + 1;" title="新增"><i class="fa fa-plus"></i> 新增</a>
			<table class="table table-striped table-bordered table-condensed">
				<thead>
					<tr>
						<th class="hide"></th>
						<th>分级区间</th>
						<th>最小值</th>
						<th>最大值</th>
						<th>备注信息</th>
						<th width="10">&nbsp;</th>
					</tr>
				</thead>
				<tbody id="trafficScaleList">
				</tbody>
			</table>
			<script type="text/template" id="trafficScaleTpl">//<!--
				<tr id="trafficScaleList{{idx}}">
					<td class="hide">
						<input id="trafficScaleList{{idx}}_id" name="trafficScaleList[{{idx}}].id" type="hidden" value="{{row.id}}"/>
						<input id="trafficScaleList{{idx}}_delFlag" name="trafficScaleList[{{idx}}].delFlag" type="hidden" value="0"/>
					</td>
					
					<td>
						<input id="trafficScaleList{{idx}}_name" name="trafficScaleList[{{idx}}].name" type="text" value="{{row.name}}"    class="form-control "/>
					</td>
					
					
					<td>
						<input id="trafficScaleList{{idx}}_min" name="trafficScaleList[{{idx}}].min" type="text" value="{{row.min}}"    class="form-control "/>
					</td>
					
					
					<td>
						<input id="trafficScaleList{{idx}}_max" name="trafficScaleList[{{idx}}].max" type="text" value="{{row.max}}"    class="form-control "/>
					</td>
					
					
					<td>
						<input id="trafficScaleList{{idx}}_remarks" name="trafficScaleList[{{idx}}].remarks" rows="4" value="{{row.remarks}}"   class="form-control "/>
					</td>
					
					<td class="text-center" width="10">
						{{#delBtn}}<span class="close" onclick="delRow(this, '#trafficScaleList{{idx}}')" title="删除">&times;</span>{{/delBtn}}
					</td>
				</tr>//-->
			</script>
			<script type="text/javascript">
				var trafficScaleRowIdx = 0, trafficScaleTpl = $("#trafficScaleTpl").html().replace(/(\/\/\<!\-\-)|(\/\/\-\->)/g,"");
				$(document).ready(function() {
					var data = ${fns:toJson(project.trafficScaleList)};
					for (var i=0; i<data.length; i++){
						addRow('#trafficScaleList', trafficScaleRowIdx, trafficScaleTpl, data[i]);
						trafficScaleRowIdx = trafficScaleRowIdx + 1;
					}
				});
			</script>
			</div>
		</div>
		</div>
		</form:form>
		</div>
		<div id="tab-02" class="tab-pane fade ">
			<div style="height: 20px;"></div>
			<%--<input type="button" class="btn" value="新增" onclick="addup()"/>--%>
			<div style="height: 20px;"></div>
           <table class="table table-bordered">
			   <tr>
			   <th>货主全称</th>
			   <th>简称</th>
			   <th>注册地址</th>
			   <th>法人代表</th>
			   <th>开户银行</th>
			   <th>地址</th>
			   </tr>
			   <c:forEach items="${ups}" var="up">
				   <tr>
					   <td>${up.name}</td>
					   <td>${up.abbreviation}</td>
					   <td>${up.registerAddress}</td>
					   <td>${up.legalPerson}</td>
					   <td>${up.bankName}</td>
					   <td>${up.address}</td>
				   </tr>
			   </c:forEach>
		   </table>
		</div>
		<div id="tab-03" class="tab-pane fade ">
			<div style="height: 20px;"></div>
			<%--<input type="button" class="btn" value="新增"/>--%>
			<div style="height: 20px;"></div>
			<table class="table table-bordered">
				<tr>
					<th>一级客户名称</th>
					<th>收货单位名称</th>
					<th>收货单位地址</th>
					<th>负责人</th>
					<th>负责人电话</th>
				</tr>
				<c:forEach items="${lns}" var="ln">
					<tr>
						<td>${ln.name}</td>
						<td>${ln.company}</td>
						<td>${ln.address}</td>
						<td>${ln.person}</td>
						<td>${ln.phone}</td>
					</tr>
				</c:forEach>
			</table>
		</div>
		<div id="tab-04" class="tab-pane fade ">
			<div style="height: 20px;"></div>
			<%--<input type="button" class="btn" value="新增"/>--%>
			<div style="height: 20px;"></div>
			<table class="table table-bordered">
				<tr>
					<th>组织名称</th>
					<th>简称</th>
					<th>负责人</th>
					<th>负责人电话</th>
					<th>邮箱</th>
					<th>地址</th>
				</tr>
				<c:forEach items="${orgs}" var="org">
					<tr>
						<td>${org.name}</td>
						<td>${org.abbreviation}</td>
						<td>${org.person}</td>
						<td>${org.phone}</td>
						<td>${org.zipCode}</td>
						<td>${org.address}</td>
					</tr>
				</c:forEach>
			</table>
		</div>
		<div id="tab-05" class="tab-pane fade ">

		</div>

	</div></div>
</body>
</html>